<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas :area-type="areaType" :areas="treeAreas" v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container">
            <el-input v-model="listQuery.device_number" class="filter-item" clearable
                      placeholder="终端编号" style="margin-left: 20px;width: 140px"></el-input>
            <el-select v-model="listQuery.unit" class="filter-item" clearable placeholder="单元号"
                       style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in units"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-input v-model="listQuery.floor" class="filter-item" clearable placeholder="楼层"
                      style="margin-left: 10px;width: 120px" type="number"></el-input>
            <el-input v-model="listQuery.room_number" class="filter-item" clearable placeholder="门牌号"
                      style="margin-left: 10px;width: 120px" type="number"></el-input>
            <el-date-picker v-model="listQuery.date_range" :picker-options="pickerOptions" class="filter-item"
                            clearable
                            end-placeholder="结束日期"
                            range-separator="至"
                            start-placeholder="开始日期"
                            style="margin-left:20px"
                            type="daterange"
                            unlink-panels
                            value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-select v-if="checkColumns('meter_battery_status')" v-model="listQuery.meter_battery_status"
                       class="filter-item" clearable placeholder="电池电压" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'欠压',value:1},{name:'正常',value:0},{name:'电池电压',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('electrica_fault_status')" v-model="listQuery.electrica_fault_status"
                       class="filter-item" clearable placeholder="电路" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'电路故障',value:1},{name:'电路正常',value:0},{name:'电路',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('sensor_warning_status')" v-model="listQuery.sensor_warning_status"
                       class="filter-item" clearable placeholder="传感器" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'传感器预警',value:1},{name:'传感器正常',value:0},{name:'传感器',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('leakage_alarm_status')" v-model="listQuery.leakage_alarm_status"
                       class="filter-item" clearable placeholder="管道" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'管道漏水',value:1},{name:'管道正常',value:0},{name:'管道',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('reverse_warning_status')" v-model="listQuery.reverse_warning_status"
                       class="filter-item" clearable placeholder="是否反装" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'反装',value:1},{name:'未反装',value:0},{name:'反装',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('reset_status')" v-model="listQuery.reset_status" class="filter-item"
                       clearable placeholder="是否复位" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'发生复位',value:1},{name:'未复位',value:0},{name:'复位',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('atc_status')" v-model="listQuery.atc_status" class="filter-item"
                       clearable placeholder="是否空管" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'空管',value:1},{name:'未空管',value:0},{name:'是否空管',value:-1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="checkColumns('valve_status')" v-model="listQuery.valve_status" class="filter-item"
                       clearable placeholder="阀门状态" style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in valveStatus"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="filter-container">
            <el-input v-if="checkPermission('设置水量')" v-model.number="listQuery.positive_volume_min" class="filter-item" clearable placeholder="正向水量" prefix=""
                      style="margin-left: 20px;width: 110px"></el-input>
            <div v-if="checkPermission('设置水量')" class="filter-item" style="margin-left: 5px;margin-right: 5px">-</div>
            <el-input v-if="checkPermission('设置水量')" v-model.number="listQuery.positive_volume_max" class="filter-item" clearable
                      style="width: 110px"></el-input>
            <el-input v-if="checkPermission('设置水量')" v-model.number="listQuery.reverse_volume_min" class="filter-item" clearable placeholder="反向水量"
                      style="margin-left: 10px;width: 110px">
            </el-input>
            <div v-if="checkPermission('设置水量')"  class="filter-item" style="margin-left: 5px;margin-right: 5px">-</div>
            <el-input v-if="checkPermission('设置水量')" v-model.number="listQuery.reverse_volume_max" class="filter-item" clearable prefix=""
                      style="width: 110px"></el-input>
            <el-button v-if="checkPermission('查询记录')" class="filter-item" icon="el-icon-search" style="margin-left:20px"
                       type="primary" @click="getMeterList">
              查询
            </el-button>
            <el-button v-if="checkPermission('导出记录')" :loading="exportLoading" class="filter-item"
                       icon="el-icon-download" style="margin-left: 10px" type="primary" @click="exportMeter">
              导出
            </el-button>
            <el-button v-if="checkPermission('设置水量')" class="filter-item" icon="el-icon-s-tools" style="margin-left: 10px"
                       type="primary" @click="dialogVolumeVisible=true">
              设置水量
            </el-button>
            <el-dropdown v-if="checkPermission('指令下达') && isLatest" class="filter-item" style="margin-left: 10px"
                         @command="menuCommand">
              <el-button type="primary">
                指令下发<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu v-slot="dropdown">
                <el-dropdown-item command="time">时间校准</el-dropdown-item>
                <el-dropdown-item command="open">开阀</el-dropdown-item>
                <el-dropdown-item command="close">关阀</el-dropdown-item>
                <el-dropdown-item command="rate">修改N上传频率</el-dropdown-item>
                <el-dropdown-item command="cfg">模式配置</el-dropdown-item>
                <el-dropdown-item command="plain">人工报文</el-dropdown-item>
                <el-dropdown-item command="startThreshold">始动阈值</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              ref="equipTable"
              v-loading="listLoading"
              :cell-style="{padding:0+'px'}"
              :data="list"
              :row-style="{height:40+'px'}"
              border
              fit
              height="600"
              highlight-current-row
              @sort-change="handleSort"
              stripe
              style="width: 100%;"
            >
              <el-table-column
                v-if="isLatest"
                type="selection"
                width="40">
              </el-table-column>
              <el-table-column :fixed="this.columns.length > 7" sortable="custom" prop="terminal_number" align="center" label="终端编号" width="150">
                <template slot-scope="scope">
                  <span>{{ scope.row.terminal_number }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="水司编号" width="160">
                <template slot-scope="scope">
                  <span>{{ scope.row.refer_number || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="所属用户" width="200">
                <template slot-scope="scope">
                  <span>{{ scope.row.install_address }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('positive_volume')" sortable="custom" prop="positve_volume" align="center" label="正向水量(m³)" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.positive_volume : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('reverse_volume')" sortable="custom" prop="reverse_volume" align="center" label="反向水量(m³)" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.reverse_volume : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('flow_rate')" sortable="custom" prop="flow_rate" align="center" label="瞬时流量(m³/h)" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.flow_rate : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('temperature')" sortable="custom" prop="temperature" align="center" label="水温" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? (scope.row.temperature + '°C') : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('voltage_meter')" sortable="custom" prop="voltage_meter" align="center" label="电压(V)" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.voltage_meter : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('meter_battery_status')" align="center" label="欠压">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.meter_battery_status^1) circle size="small">
                    {{ scope.row.meter_battery_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('atc_status')" align="center" label="空管">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.atc_status^1) circle size="small">
                    {{ scope.row.atc_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('electrica_fault_status')" align="center" label="电路故障" width="130">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.electrica_fault_status^1) circle size="small">
                    {{ scope.row.electrica_fault_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('reverse_warning_status')" align="center" label="反装预警" width="130">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.reverse_warning_status^1) circle size="small">
                    {{ scope.row.reverse_warning_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('sensor_warning_status')" align="center" label="传感器预警" width="130">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.sensor_warning_status^1) circle size="small">
                    {{ scope.row.sensor_warning_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('sensor_warning_p_value')" sortable="custom" prop="transducer_in" align="center" label="传感器预P值" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? (scope.row.transducer_in + '-' + scope.row.transducer_out) : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('leakage_alarm_status')" align="center" label="管道漏水">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.leakage_alarm_status^1) circle size="small">
                    {{ scope.row.leakage_alarm_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('reset_status')" align="center" label="发生复位">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.reset_status^1) circle size="small">
                    {{ scope.row.reset_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('factory_lock_status')" align="center" label="参数锁死">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.factory_lock_status^1) circle size="small">
                    {{ scope.row.factory_lock_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('under_voltage_status')" align="center" label="线断" width="130">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.under_voltage_status^1) circle size="small">
                    {{ scope.row.under_voltage_status ? '是' : '否' }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>

              <el-table-column v-if="checkColumns('valve_status')" align="center" label="阀门状态" width="80">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.meter_id" :type=formatStatus(scope.row.valve_status) circle size="small">
                    {{ valveStatus.find(item => item.value === scope.row.valve_status).name }}
                  </el-tag>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('signal_meter')" sortable="custom" prop="signal_meter" align="center" label="信号强度" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.signal_meter : '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column v-if="checkColumns('signal_noise')" align="center" label="信噪比" width="100">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.signal_noise : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('wing_id')" align="center" label="IMEI" width="160">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.wing_id : '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="版本" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.version || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('product_version')" align="center" label="软件版本" width="160">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.product_version : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="checkColumns('misi')" align="center" label="IMSI" width="160">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.misi : '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column v-if="checkColumns('iccid')" align="center" label="ICC ID"
                               width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.iccid : '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column v-if="checkColumns('volume_time')" sortable="custom" prop="volume_time" align="center" label="表内时间" width="200">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? scope.row.volume_time : '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" sortable="custom" prop="create_time" label="抄录时间" width="200">
                <template slot-scope="scope">
                  <span>{{ scope.row.meter_id ? formatDate(scope.row.create_time): '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column :fixed="this.columns.length > 7 ?'right':false" align="center" class-name="small-padding fixed-width" label="操作"
                               width="120">
                <template slot-scope="{row,$index}">
                  <!--                  <el-button v-if="checkPermission('操作日志')" icon="el-icon-info" title="操作记录" type="primary" circle @click="handleDLog(row)">-->
                  <!--                  </el-button>-->
                  <!--                  <el-button v-if="checkPermission('水量曲线')" circle icon="el-icon-s-data" title="7日水量统计" type="primary"-->
                  <!--                             @click="analysis(row)">-->
                  <!--                  </el-button>-->
                  <el-button v-if="checkPermission('24小时水量')" circle  title="24小时水量" type="primary"
                             @click="analysis(row.day_meter)">
                    <svg-icon icon-class="water" />
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :limit.sync="listQuery.pageSize" :page.sync="listQuery.page" :total="total"
                        @pagination="getMeterList"/>
            <el-dialog :visible.sync="dialogCommandVisible" custom-class="window-small-width" title="指令下发">
              <el-form ref="commandForm" :model="command.params" :rules="rules"  label-position="right" label-width="100px"
              >
                <el-form-item v-if="command.cmd == 5" label="洗阀模式" prop="zerocheck">
                  <el-switch
                    v-model="command.params.zerocheck"
                    :active-value="activeValue"
                    :inactive-value="inactiveValue"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
                <el-form-item v-if="command.cmd == 7" label="人工报文" prop="plain_text">
                  <el-input
                    type="textarea"
                    v-model="command.params.plain_text"
                    autosize/>
                </el-form-item>
                <el-form-item v-if="command.cmd === 8" label="始动阈值" prop="plain_text">
                  <el-input
                    type="textarea"
                    v-model="command.params.plain_text"
                    autosize/>
                </el-form-item>
                <el-form-item v-if="command.cmd == 4" label="上传频率" prop="model">
                  <el-input v-model="command.params.rate"  suffix-icon="el-icon-alarm-clock" type="number"/>
                </el-form-item>
                <el-form-item v-if="command.cmd == 4" label="上传时间" prop="model">
                  <el-time-select
                    v-model="command.params.time"
                    :picker-options="{
                      start: '00:00',
                      step: '00:10',
                      end: '24:00'
                    }"
                    placeholder="选择时间">
                  </el-time-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCommandVisible = false">
                  取消
                </el-button>
                <el-button :loading="btnLoading" type="primary" @click="orderCommand">
                  确认
                </el-button>
              </div>
            </el-dialog>
            <el-dialog :visible.sync="dialogVolumeVisible" custom-class="window-tiny-width" title="设置水量">
              <el-form label-position="right" label-width="100px">
                <el-form-item label="正向水量" prop="model">
                  <el-input v-model.number="command.params.positive_volume" type="number"/>
                </el-form-item>
                <el-form-item label="反向水量" prop="model">
                  <el-input v-model.number="command.params.reverse_volume" type="number"/>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCommandVisible = false">
                  取消
                </el-button>
                <el-button :loading="btnLoading" type="primary" @click="setVolume">
                  确认
                </el-button>
              </div>
            </el-dialog>
            <el-dialog :visible.sync="dialogChartVisible" title="24小时水量">
              <el-row :gutter="10" v-if="datMeter.length > 1">
                <el-col :key="idx" v-for="(value,idx) in datMeter" :span="4">
                  <el-tag> {{ (idx+1)+'点 : '+value }}</el-tag>
                </el-col>
              </el-row>
            </el-dialog>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import Pagination from '@/components/Pagination'
import {exportMeter, getList} from "@/api/meter";
import {getAreaTree} from "@/api/area";
import {getLogs, sendCommand, weeklyMeter} from "@/api/device";
//import LineChart from "@/views/equip/components/LineChart";
import {checkPermission} from "@/utils/permission";
import {mapGetters} from 'vuex';
import jsUtils from 'jutils-src'

const defaultCommandParams = {
  zerocheck: 0,
  upvalveopen: 0,
  calibration: 0,
  rate: 1,
  time: '18:30',
  minite: '',
  hour: '',
  positive_volume: 0,
  reverse_volume: 0,
  plain_text: '',
}


export default {
  name: 'CsList',
  components: {areas, Pagination},
  data() {
    return {
      tableKey: 0,
      dialogCommandVisible: false,
      dialogVolumeVisible: false,
      btnLoading: false,
      dialogLogVisible: false,
      dialogChartVisible: false,
      exportLoading: false,
      listLoading: true,
      activeValue: 1,
      inactiveValue: 0,
      list: [],
      deviceLogs: [],
      listType: 'latest',
      total: 0,
      areaType: 2,
      chartData: {},
      datMeter: [],
      listQuery: {
        area_code: '',
        floor: '',
        room_number: '',
        offline_days: 2,
        unit: '',
        category: this.$store.getters.deviceCategory,
        electrica_fault_status: -1,
        sensor_warning_status: -1,
        meter_battery_status: -1,
        leakage_alarm_status: -1,
        reverse_warning_status: -1,
        positive_volume_min: '',
        positive_volume_max: '',
        reverse_volume_min: '',
        reverse_volume_max: '',
        atc_status: -1,
        valve_status: -1,
        reset_status: -1,
        device_code: '',
        date_range: [''],
        page: 1,
        pageSize: 50,
        sorter: '',
      },
      units: ['一单元', '二单元', '三单元', '四单元', '五单元', '六单元', '七单元', '八单元', '九单元', '十单元'],
      workModels: [{name: '线断', value: 1}, {name: '检定模式', value: 2}, {name: '洗阀模式', value: 3}],
      valveStatus:[{name:'开',value:1},{name:'关',value:0},{name:'异常',value:2},{name:'阀门状态',value:-1}],
      command: {ids: [], params: defaultCommandParams, cmd: 0},
      treeAreas: [],
      exportData: {
        list: [],
        headers: []
      },
      rules: {
        plain_text : [ { required: true, message: '请输入人工报文', trigger: 'blur' }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.listQuery.atc_status = parseInt(this.$route.query.atc_status) || -1
    this.listQuery.offline_days = parseInt(this.$route.query.duration) || 0
    this.listQuery.area_code = this.$route.query.code
    this.listQuery.sensor_warning_status = parseInt(this.$route.query.sensor_warning_status) || -1
    this.listQuery.electrica_fault_status = parseInt(this.$route.query.electrica_fault_status) || -1
    this.listQuery.meter_battery_status = parseInt(this.$route.query.meter_battery_status) || -1
    this.listQuery.leakage_alarm_status = parseInt(this.$route.query.leakage_alarm_status) || -1
    this.listQuery.reset_status = parseInt(this.$route.query.reset_status) || -1
    if(this.$route.query.valve_status !== undefined){
      this.listQuery.valve_status = parseInt(this.$route.query.valve_status)
    }
    this.listQuery.reverse_warning_status = parseInt(this.$route.query.reverse_warning_status) || -1
    this.listQuery.under_voltage_status = parseInt(this.$route.query.under_voltage_status) || -1
    this.getMeterList()
    this.getAreaTree()
  },
  computed: {
    isLatest() {
      return this.listType === 'latest'
    },
    ...mapGetters([
      'columns'
    ])
  },
  methods: {
    checkPermission,
    checkColumns(columns) {
      return this.columns.includes(columns)
    },
    handleSort(column) {
      if(column.order === 'ascending'){
        this.listQuery.sorter = column.prop+' asc'
      }else{
        this.listQuery.sorter = column.prop+' desc'
      }
      this.getMeterList()
    },
    exportMeter() {
      this.exportLoading = true
      const query = Object.assign({}, this.listQuery)
      query.electrica_fault_status =query.electrica_fault_status || -1
      query.sensor_warning_status = query.sensor_warning_status || -1
      query.meter_battery_status = query.meter_battery_status || -1
      query.leakage_alarm_status = query.leakage_alarm_status || -1
      query.valve_status = query.valve_status || -1
      query.positive_volume_max = query.positive_volume_max || 0
      query.positive_volume_min = query.positive_volume_min || 0
      query.reverse_volume_max = query.reverse_volume_max || 0
      query.reverse_volume_min = query.reverse_volume_min || 0
      query.offline_days = parseInt(query.offline_days) || 0
      exportMeter(query).then(res => {
        if (res.code === 20000) {
          this.exportData.list = res.data.list
          this.exportData.headers = res.data.headers
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = this.exportData.headers
            const data = this.exportData.list
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '抄表数据',
              autoWidth: true,
              bookType: 'xlsx'
            })
            this.exportLoading = false
          })
        }
      })
    },
    getAreaTree(type) {
      getAreaTree({type: 2}).then(response => {
        this.treeAreas = response.data
      })
    },
    analysis(raw) {
      this.datMeter = raw.split(',')
      this.dialogChartVisible = true
    },
    menuCommand(cmd) {
      this.command.ids = []
      this.command.params = defaultCommandParams
      switch (cmd) {
        case 'del':
          this.handleDelete()
          break
        case 'time':
          this.sendCmd(1)
          break
        case 'open':
          this.command.params.status = 1
          this.sendCmd(2)
          break
        case 'close':
          this.command.params.status = 0
          this.sendCmd(2)
          break
        case 'off':
          this.sendCmd(3)
          break
        case 'rate':
          this.sendCmd(4)
          break
        case 'cfg':
          this.sendCmd(5)
          break
        case 'plain':
          this.sendCmd(7)
          break
        case 'startThreshold':
          this.sendCmd(8)
      }
    },
    orderCommand() {
      let data = Object.assign({}, this.command)
      data.params.rate = parseInt(data.params.rate)
      if (data.cmd === 4) {
        let t = data.params.time.split(':')
        if (t.length < 2) {
          this.$message.error('上传时间设置错误')
          return
        }
        data.params.hour = t[0]
        data.params.minite = t[1]
      }
      this.$refs['commandForm'].validate( (valid) => {
        if(valid) {
          this.btnLoading = true
          sendCommand(data).then(response => {
            if (response.code === 20000) {
              this.$notify({
                title: 'Success',
                message: '命令下达成功',
                type: 'success',
                duration: 3000
              })
              this.dialogCommandVisible = false
            } else {
              this.$notify({
                title: 'Failed',
                message: response.message,
                type: 'error',
                duration: 3000
              })
            }
          })
          this.btnLoading = false
        }else{
          return false
        }
      })

    },
    setVolume() {
      this.command.cmd = 6
      let selectRows = this.$refs.equipTable.selection
      let ids = []
      selectRows.forEach(function (row) {
        ids.push(row.device_id)
      })
      this.command.ids = ids
      if (this.command.ids.length === 0) {
        this.$message.warning('请勾选设备')
        return
      }
      this.$confirm('是否确认发送命令', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sendCommand(this.command).then(response => {
          if (response.code === 20000) {
            this.$message.success('操作成功')
            this.dialogVolumeVisible = false
          } else {
            this.$message.error(response.message)
          }
        })
      })
    },
    sendCmd(cmd) {
      this.command.cmd = cmd
      let selectRows = this.$refs.equipTable.selection
      let ids = []
      selectRows.forEach(function (row) {
        ids.push(row.device_id)
      })
      this.command.ids = ids
      if (this.command.ids.length === 0) {
        this.$message.warning('请勾选设备')
        return
      }
      if (cmd < 4) {
        this.$confirm('是否确认发送命令', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendCommand(this.command).then(response => {
            if (response.code === 20000) {
              this.$message.success('操作成功')
            } else {
              this.$message.error(response.message)
            }
          })
        })
      } else {
        this.dialogCommandVisible = true
      }
    },
    onHandleNodeClick: function (data) {
      if (this.listQuery.area_code !== data.code) {
        this.listQuery.area_code = data.code
        this.getMeterList()
      }
    },
    getMeterList() {
      this.listLoading = true
      const query = Object.assign({}, this.listQuery)
      query.electrica_fault_status = this.listQuery.electrica_fault_status || -1
      query.sensor_warning_status = this.listQuery.sensor_warning_status || -1
      query.meter_battery_status = this.listQuery.meter_battery_status || -1
      query.leakage_alarm_status = this.listQuery.leakage_alarm_status || -1
      query.positive_volume_max = this.listQuery.positive_volume_max || 0
      query.positive_volume_min = this.listQuery.positive_volume_min || 0
      query.reverse_volume_max = this.listQuery.reverse_volume_max || 0
      query.reverse_volume_min = this.listQuery.reverse_volume_min || 0
      getList(query).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listType = response.data.type
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    resetQueryParams() {
      this.listQuery = {
        area_code: '',
        floor: '',
        room_number: '',
        unit: '',
        electrica_fault_status: -1,
        sensor_warning_status: -1,
        meter_battery_status: -1,
        leakage_alarm_status: -1,
        reverse_warning_status: -1,
        positive_volume_min: '',
        positive_volume_max: '',
        reverse_volume_min: '',
        reverse_volume_max: '',
        atc_status: -1,
        reset_status: -1,
        device_code: '',
        date_range: [''],
        page: 1,
        pageSize: 20
      }
    },
    formatDate(dateStr) {
      return jsUtils.formatDate(new Date(dateStr), 'YYYY-MM-DD HH:ii:ss')
    },
    formatStatus(status) {
      switch (status) {
        case 0:
          return 'danger'
        case 1:
          return 'success'
        case 2:
          return 'warning'
      }
    },
  }
}
</script>
